<template>
  <div class="answer-content">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="goBack" class="mui-action-back"><img class="back-btn"
                                                           src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">在线答题</div>
        <div @click="showCard()" class="header-right flex-center answer-card"><img
          src="../../../../static/images/zhuzhi_jiegou.png" alt="">答题卡
        </div>
      </div>
    </header>
    <div class="flex-justify-start study-header">
      <h2 class="organization-lists-title">题数：{{selectNum}}/{{swipeData.length}}</h2>
      <div class="organization-lists-title mine-lists-content flex-center">
        剩余时间：<span class="mine-lists-money"><timeOutComponent :initSeconds="60*60"
                                                              @endTime="endTime()"></timeOutComponent></span>
      </div>
      <div @click="dialog" class="red-btn flex-center">提交</div>
    </div>
    <div class="mui-page-content mui-pages">
      <div id="cardList" class="mui-scroll-wrapper mui-pages">
        <div class="mui-scroll">
          <ul class="mui-table-view" v-for="(data,index) in swipeData" :key="data.id">
            <li v-if="data.type==='1'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【单选】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div class="mui-input-row mui-radio mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input @click="radioSelectItem(index, examAnswerVoList1.id)" :name="data.id" value="type1"
                           type="radio">
                  </div>
                </div>
              </div>
            </li>
            <li v-if="data.type==='2'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【多选】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div class="mui-input-row mui-checkbox mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input @click="checkboxSelectItem(index, examAnswerVoList1.id)" :name="data.id" value="type2"
                           type="checkbox">
                  </div>
                </div>
              </div>
            </li>
            <li v-if="data.type==='3'" class="mui-table-view-cell">
              <h2 class="organization-lists-title">{{index+1}}.【判断题】{{data.title}}</h2>
              <div class="types-lists answer-notice-lists">
                <div v-for="(examAnswerVoList1,index_) in data.examAnswerVoList" :key="examAnswerVoList1.id">
                  <div class="mui-input-row mui-radio mui-left flex-center">
                    <label>{{examAnswerVoList1.name}}</label>
                    <input @click="radioSelectItem(index, examAnswerVoList1.id)" :name="data.id" value="type3"
                           type="radio">
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="isShowCard" id="cardNum" class="mui-popover mui-popover-action mui-popover-bottom"
         style="display:block;opacity:1;transform:translate3d(0,0,0)">
      <div class="record-member-lists">
        <h2 class="card-title">答题卡</h2>
        <div class="work-message-lists card-content-lists flex-justify-start">
          <div v-for="(item,index) in swipeData" :class="{'no-select':!isChecked(item)}" :key="index"
               @click="turn2item(index+1)">{{index+1}}
          </div>
        </div>
      </div>
    </div>
    <div v-if="isShowCard" @click="isShowCard=false" class="mui-backdrop mui-backdrop-action mui-active" style=""></div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import timeOutComponent from './timeOutComponent'

  export default {
    name: 'answerBegin',
    components: {timeOutComponent},
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        isShowCard: false,
        objectsName: '',
        swipeData: [],
        infinite: true,
        pageIndex: 0,
        year: new Date().getFullYear(),
        attachmentList: [],
        tabIndex: 0,
        d: '',
        h: '',
        m: '',
        s: '',
        selectNum: 0
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      // 考试时间到
      endTime () {
        tools.alert('考试时间到')
      },
      loadData () {
        let weekPlanId = this.$route.params.weekPlanId
        let data = {
          weekPlanId: weekPlanId
        }
        loginService.startAnswerByWeekPlanId(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.swipeData = res.data
          this.swipeData.map((v, index) => {
            v.examAnswerVoList.map((w, index_) => {
              switch (index_) {
                case 0:
                  w.name = 'A、' + w.name
                  break
                case 1:
                  w.name = 'B、' + w.name
                  break
                case 2:
                  w.name = 'C、' + w.name
                  break
                case 3:
                  w.name = 'D、' + w.name
                  break
              }
            })
          })
        })
      },
      radioSelectItem (rootIndex, id) {
        if (!this.swipeData[rootIndex].result) {
          this.selectNum++
        }
        this.swipeData[rootIndex].result = id
        console.log('result=', this.swipeData[rootIndex].result)
      },
      checkboxSelectItem (rootIndex, id) {
        if (this.swipeData[rootIndex].checkboxResult) {
          let index = this.swipeData[rootIndex].checkboxResult.indexOf(id)
          if (index !== -1) {
            this.swipeData[rootIndex].checkboxResult.splice(index, 1)
            if (this.swipeData[rootIndex].checkboxResult.length === 0) {
              this.selectNum--
            }
          } else {
            this.swipeData[rootIndex].checkboxResult.push(id)
          }
        } else {
          this.swipeData[rootIndex].checkboxResult = []
          this.swipeData[rootIndex].checkboxResult.push(id)
          this.selectNum++
        }
        console.log('checkboxResult=', this.swipeData[rootIndex].checkboxResult)
      },
      dialog () {
        let me = this
        this.$createDialog({
          type: 'confirm',
          icon: '',
          title: '温馨提示',
          content: '确定提交本次考试？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.submit()
          },
          onCancel: () => {
          }
        }).show()
      },
      submit () {
        let weekPlanId = this.$route.params.weekPlanId
        let resultArr = []
        let canSubmit = true
        this.swipeData.map((v) => {
          let result = {}
          result.itemResultId = v.itemResultId
          result.paperId = ''
          result.weekPlanId = weekPlanId
          result.questionId = v.id
          if (v.type === '2') { // 多选
            if (v.checkboxResult) {
              let checkboxResultStr = v.checkboxResult.join(',')
              result.result = checkboxResultStr
            } else {
              canSubmit = false
            }
          } else { // 单选
            if (v.result) {
              result.result = v.result
            } else {
              canSubmit = false
            }
          }
          resultArr.push(result)
        })
        console.log('resultArr=', resultArr)
        if (!canSubmit) {
          return tools.tip('请答完所有题目再提交')
        }

        loginService.saveAnswer(resultArr).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          console.log('res.data=', res.data)
          res.weekPlanId = weekPlanId
          this.$localStorage.set('answerRes', res)
          this.$router.replace({name: `answerConsult`})
        })
        // let res = {
        //   data: {
        //     score: 0.5,
        //     answerCount: 2
        //   },
        //   message:"您未全对，还剩1次机会",
        //   weekPlanId: weekPlanId
        // }
        // this.$localStorage.set('answerRes', res)
        // this.$router.replace({name: `answerConsult`})
      },
      goBack () {
        let me = this
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '答题未完成，确定退出答题？',
          confirmBtn: {
            text: '确定退出',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消退出',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.fn.back()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 显示答题卡
      showCard () {
        this.isShowCard = true
      },
      // 跳转题目
      turn2item (n) {
        let el = document.querySelectorAll('.mui-table-view')[n - 1]
        let cardList = document.querySelector('#cardList')
        cardList.scrollTop = el.offsetTop
        this.isShowCard = false
      },
      // 是否已经选择答案
      isChecked (item) {
        return item.result || (Array.isArray(item.checkboxResult) && item.checkboxResult.length > 0)
      }
    }
  }
</script>

<style scoped>

</style>
